import React from 'react';
import { Lightbulb, Sparkles } from 'lucide-react';

const usageExamples = [
  {
    title: '插入图片',
    description: '使用Markdown的图片语法，并将变量作为URL。',
    code: '![跨越点俯瞰图]({{crossing_topViewImage}})',
  },
  {
    title: '遍历简单列表 (如安全措施)',
    description: '使用 {{#变量名}} 和 {{/变量名}} 包围，并用 {{.}} 代表列表中的每一项。',
    code: `## 安全措施\n\n{{#scheme_safetyMeasures}}\n- {{.}}\n{{/scheme_safetyMeasures}}`,
  },
  {
    title: '遍历对象列表 (如施工步骤)',
    description: '在循环内部，使用 {{属性名}} 来访问每个对象的属性。',
    code: `## 施工步骤\n\n{{#scheme_constructionSteps}}\n### {{stepName}}\n\n- **描述**: {{description}}\n- **工时**: {{durationHours}} 小时\n\n{{/scheme_constructionSteps}}`,
  },
  {
    title: '结合静态文本与变量',
    description: '可以直接在文本中嵌入变量，系统会自动替换。',
    code: '本项目位于 {{project_start_location}} 和 {{project_endLocation}} 之间，电压等级为 {{project_voltage_level}}。',
  },
];

export default function VariableUsageGuide() {
  return (
    <div className="space-y-4">
      <h3 className="text-base font-semibold">变量高级用法</h3>
      
      {/* 新增：AI使用提示 */}
      <div className="flex items-start gap-2 p-3 bg-gradient-to-r from-purple-50 to-blue-50 text-purple-800 rounded-lg border border-purple-200 mb-4">
        <Sparkles className="w-5 h-5 mt-0.5 shrink-0 text-purple-600" />
        <div className="text-xs">
          <p className="font-semibold mb-1">💡 AI智能替换小贴士</p>
          <ul className="space-y-1 text-xs">
            <li>• <strong>全文替换</strong>：将整个文档的具体信息自动替换为变量</li>
            <li>• <strong>选中替换</strong>：选中特定文本，AI会智能判断并替换为合适的变量或循环语法</li>
            <li>• <strong>上下文理解</strong>：AI会根据文档上下文选择最合适的变量名</li>
          </ul>
        </div>
      </div>
      
      <div className="space-y-4">
        {usageExamples.map((example, index) => (
          <div key={index}>
            <h3 className="font-semibold text-sm mb-1">{example.title}</h3>
            <p className="text-xs text-gray-600 mb-2">{example.description}</p>
            <pre className="bg-gray-50 p-2 rounded text-xs font-mono whitespace-pre-wrap border w-full overflow-hidden">{example.code}</pre>
          </div>
        ))}
        
        <div className="flex items-start gap-2 p-3 bg-blue-50 text-blue-800 rounded-lg border border-blue-200 mt-4">
          <Lightbulb className="w-5 h-5 mt-0.5 shrink-0" />
          <p className="text-xs">
            提示：预览功能可以帮助您验证循环和变量替换是否按预期工作。使用AI替换功能可以快速将普通文本转换为模板变量。
          </p>
        </div>
      </div>
    </div>
  );
}